<template>
  <div class="app-container">
    <el-form :rules="rules" ref="formRef" :model="form" style="margin-top: 10px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="文章名称" label-width="120px" prop="title">
            <el-input v-model="form.title" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="文章简介" label-width="120px" prop="summary">
            <el-input auto-complete="off" v-model="form.summary" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="标题图" label-width="120px">
            <el-col :span="6">
              <el-upload style="width: 80px; height: 80px" class="avatar-uploader" :action="host+'/cms/pics'" :show-file-list="false" with-credentials :on-success="afterAvatarUpload">
                <img v-if="form.avatar" :src="form.avatar" class="imgAvatar" />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="分类" label-width="120px" prop="category">
            <el-tag type="success" v-show="form.category" style="margin: 0 1rem 0 0" :closable="true" @close="reomveCategory()">
              {{ form.category }}
            </el-tag>
            <!-- 分类选项 -->
            <el-popover placement="bottom-start" width="460" trigger="click" v-if="!form.category">
              <template #reference>
                <el-button type="success" icon="Plus">分类选择</el-button>
              </template>
              <!-- 分类 -->
              <div class="popover-container">
                <el-tag v-for="(item, index) of cates" size="large" :key="index" style="margin-left: 3px; margin-top: 2px" class="category-item" @click="setCategory(item)">
                  {{ item.name }}
                </el-tag>
              </div>
            </el-popover>
          </el-form-item>
        </el-col>
        <el-col :span="6.5">
          <el-form-item label-width="120px" label="文章状态">
            <el-radio-group v-model="form.status">
              <el-radio v-for="dict in articles_status" :key="dict.value" :label="dict.value" border>{{ dict.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="1" :offset="1">
          <el-button type="primary" plain icon="Plus" @click="saveForm">保存</el-button>
        </el-col>
        <el-col :span="1" :offset="1">
          <el-button type="warning" plain icon="Close" @click="handleClose">关闭</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18">
          <el-form-item label-width="120px" label="内容" prop="contentMd">
            <mavon-editor placeholder="输入文章内容..." style="height: 500px" ref="md" v-model="form.contentMd" @imgAdd="editorImgAdd" />
          </el-form-item>
        </el-col>
        <el-col :span="1"> </el-col>
        <el-col :span="4">
          <el-upload style="width: 240px; height: 80px" class="avatar-uploader" with-credentials name="file" :action="host+'/cms/files'" :on-success="afterFileUpload" show-file-list multiple>
            <el-icon class="avatar-uploader-icon"><upload-filled /></el-icon>
            <template #tip>
              <div class="el-upload__tip">上传文章附件</div>
            </template>
          </el-upload>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script setup name="NewArticle">

import { queryList as queryCateList } from "@/api/cms/category";
import { createOne } from "@/api/cms/article";
import { imgUpload, fileUpload } from "@/api/cms/index";
const { proxy } = getCurrentInstance();
const host = inject('host')
const articles_status = ref([
  {
    value: 1,
    label: "发布",
  },
  {
    value: 0,
    label: "不发布",
  },
]);
const data = reactive({
  form: {
    title: undefined,
    category: undefined,
    editor: "mavon",
    avatar: undefined,
    summary: undefined,
    status: 1,
    content: undefined,
    contentMd: undefined,
    fileIds: [],
  },
  rules: {
    title: [{ required: true, message: "文章标题不能为空", trigger: "blur" }],
    content: [{ required: true, message: "文章内容不能为空", trigger: "blur" }],
  },
});

const { form, rules } = toRefs(data);
const visible = ref(true);
// 编辑器文件上传
function editorImgAdd(pos, $file) {
  var formData = new FormData();
  formData.append("file", $file);
  imgUpload(formData)
    .then((res) => {
      let imgUrl = process.env.VITE_APP_BASE_API + "/cms/preview/" + res.id;
      proxy.$refs["md"].$img2Url(pos, imgUrl);
    })
    .catch((err) => {
      console.log(err);
    });
}
// 保存
function saveForm() {
  proxy.$modal.loading("文章上传中~");
  form.value.content = proxy.$refs["md"].d_render;
  createOne(form.value).then((res) => {
    console.log(res);
    proxy.$modal.alertSuccess("文章上传成功");
    proxy.$modal.closeLoading();
    handleClose();
  });
}
// 返回
function handleClose() {
  const obj = { path: "/cms/article" };
  proxy.$tab.closeOpenPage(obj);
}
// 分类列表
const cates = ref([]);
// 设置分类
function setCategory(data) {
  form.value.category = data.name;
}
// 移除分类
function reomveCategory() {
  form.value.category = undefined;
}
// 获取分类列表
function getCates() {
  const queryParams = {
    pageSize: 999,
    pageNum: 1,
  };
  queryCateList(queryParams).then((res) => {
    cates.value = res.content;
  });
}
function afterAvatarUpload(res) {
  let avatar = import.meta.env.VITE_APP_BASE_API + "/cms/preview/" + res.data.id;
  console.log(avatar);
  form.value.avatar = avatar;
}
function afterFileUpload(res) {
  let fileId = res.data.id;
  console.log(fileId);
  form.value.fileIds = form.value.fileIds.concat(fileId);
}
getCates();
// 新建文章
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 110px;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-img-icon {
  font-size: 28px;
  color: #8c939d;
  line-height: 110px;
  text-align: center;
}
.imgAvatar {
  width: 200px;
  height: 110px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  margin: 0, 0, 0, 10px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
#imgIcon {
  color: #fff;
  font-size: 1.5rem;
  position: absolute;
  right: 1rem;
  bottom: 1.4rem;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 195px;
  height: 105px;
  line-height: 105px;
  text-align: center;
}

.imgBody {
  width: 195px;
  height: 105px;
  border: solid 2px #ffffff;
  float: left;
  position: relative;
}

.uploadImgBody {
  margin-left: 5px;
  width: 195px;
  height: 105px;
  border: dashed 1px #c0c0c0;
  float: left;
  position: relative;
}

.uploadImgBody :hover {
  border: dashed 1px #00ccff;
}

.inputClass {
  position: absolute;
}
.article-cover {
  position: relative;
  width: 100%;
  height: 90px;
  border-radius: 4px;
}
.article-cover::after {
  content: "";
  background: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
</style>
